<template>
  <div>
    <el-input  v-model="input" placeholder="商品编号或名称" size="normal" clearable  style="width: 200px;"></el-input>
<el-button type="primary" size="default" @click="search">查询</el-button>
<el-button type="primary" size="default" @click="dialogFormVisible=true">新增商品</el-button>
    <el-table :data="tableData" height="600" style="width: 100%">
    <el-table-column prop="id" label="商品编号" width="150" />
    <el-table-column prop="name" label="商品名称" width="150" />
    <el-table-column prop="value" label="商品原价格" width="150" />
    <el-table-column prop="skillprice" label="商品秒杀价格" width="150" />
    <el-table-column prop="begintime" label="秒杀开始时间" width="150" />
    <el-table-column prop="endtime" label="秒杀结束时间" width="150" />
    <el-table-column  label="操作 " width="150" >
      <template #default="scope">
        <el-button link type="primary" size="small" @click="remove(scope.$index)" >删除</el-button>
        <el-button link type="primary" size="small" @click="handleEdit(scope.$index)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog v-model="dialogFormVisible" title="商品信息">
    <el-form :model="form">
      <el-form-item label="商品种类" >
        <el-select
    v-model="form.productname"
    class="m-2"
    placeholder="请选择商品"
    size="large"
    style="width: 240px"
  >
    <el-option
      v-for="(item,index) in shopformation"
      :key="index"
      :label="item.name"
      :value="item.name"
    />
  </el-select>
      </el-form-item>
      <el-form-item label="秒杀开始时间" v-model="form.begintime">
        <el-date-picker
        v-model="form.begintime"
        type="datetime"
        placeholder="begintime"
        value-format="YYYY-MM-DD HH:mm:ss"
        format="YYYY-MM-DD HH:mm:ss"
      />
      </el-form-item>
      <el-form-item label="秒杀结束时间" >
        <el-date-picker
        v-model="form.endtime"
        type="datetime"
        placeholder="endtime"
        value-format="YYYY-MM-DD HH:mm:ss"
        format="YYYY-MM-DD HH:mm:ss"
      />
      </el-form-item>
      <el-form-item label="商品秒杀价" :label-width="formLabelWidth">
        <el-input v-model="form.skillprice" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="add">
         确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="editformVisible" title="商品信息">
    <el-form :model="form">
   
      <el-form-item label="商品秒杀价" >
        <el-input v-model="form.skillprice" autocomplete="off" />
      </el-form-item>
      <el-form-item label="秒杀开始时间" >
        <el-date-picker
        v-model="form.begintime"
        type="datetime"
        placeholder="begintime"
        value-format="YYYY-MM-DD HH:mm:ss"
        format="YYYY-MM-DD HH:mm:ss"
      />
      </el-form-item>
      <el-form-item label="秒杀结束时间" >
        <el-date-picker
        v-model="form.endtime"
        type="datetime"
        placeholder="endtime"
        value-format="YYYY-MM-DD HH:mm:ss"
        format="YYYY-MM-DD HH:mm:ss"
      />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="editformVisible = false">取消</el-button>
        <el-button type="primary" @click="Editconfirm">
         确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <div>
  </div>
  </div>
</template>

<script>
import axios from '@/utils/request';
// import { ref } from 'vue';
// import { ref } from 'vue';
export default {
name:'MiaoSha',
data() {
  return {
    productid:'',
    date:'',
    input:'',
    editformVisible:false,
    dialogFormVisible:false,
    form:{
      productname:'',
      proid:'',
      id:'',
      begintime:'',
      endtime:'',
      name:'',
      value:'',
      skillprice:'',}
  ,
    tableData:[],
    shopformation:'',
  }
},
methods:{
  remove(index){
    const parmas={
      id:this.tableData[index].id,
      // proid:this.tableData[index].proid
    }
    axios.post('/ser_act_skillpro/delskillpro',JSON.stringify(parmas)).then(res=>{
console.log(res);
    })
    this.tableData.splice(index,1)
    
  },
  add(){
    // console.log(this.value2);
    this.setproductid(this.form.productname)
    console.log(this.productid);
    this.form.productid=this.productid
    console.log(this.form);
    const parmas={
      proid:this.productid,
      begintime:this.form.begintime,
      endtime:this.form.endtime,
      skillprice:this.form.skillprice,
    }
  // console.log(this.form);
  const b=JSON.parse(JSON.stringify(this.form))
    // console.log(this.form);
    console.log(b);
    const a= JSON.parse(JSON.stringify(this.tableData))
    a.push(b)
    console.log(a);
    this.tableData=a
    console.log(this.tableData);
    axios.post('/ser_act_skillpro/addskillpro',JSON.stringify(parmas)).then(res=>{
      console.log(res.data);
      
    })
    this.form={}
this.dialogFormVisible=false
  },
  handleEdit(index){
      this.form =this.tableData[index]
      //把当前编辑的行号赋值给全局保存的行号
      console.log(this.form);
      this.editformVisible = true
  },
  Editconfirm(){
    const params={
      id:this.form.id,
      proid:this.form.proid,
      begintime:this.form.begintime,
      endtime:this.form.endtime,
      skillprice:this.form.skillprice,
    }
    console.log(params);
    axios.post('/ser_act_skillpro/updateskillpro',JSON.stringify(params))
    this.form={}
    this.editformVisible=false
  },
  getall(){
   axios.get('/ser_act_skillpro/selall').then(res=>{
    this.tableData=res.data
    console.log(res.data);
    console.log(this.tableData);
   })
  },
  getitemformation(){
    axios.get('/ser_product/selall').then(res=>{
      this.shopformation=res.data
      console.log(this.shopformation);
    })
  },
  search(){
    const tag=JSON.parse(JSON.stringify(this.tableData))
    console.log(tag);
  this.tableData = tag.filter(v =>(v.id.includes(this.input))||(v.name.includes(this.input)))
  },
 setproductid(productname){
  
  for(let i=0;i<this.shopformation.length;i++)
  {
    if(productname===this.shopformation[i].name)
    {
     this.productid=this.shopformation[i].id
    }
  }
 }
},
mounted(){
this.getall(),
this.getitemformation()
}
}
</script>

<style>

</style>